<%--
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
	<title>AiDex Sharp 快速开发平台-登录页面</title>
	<link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
	<link rel="icon" href="/static/regist/img/favicon.ico">
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<img class="wave" src="/static/regist/img/wave.png">
<div class="container">
	<div class="img">
		<img src="/static/regist/img/bg.svg">
	</div>
	<div class="login-content">
		<form>
			<img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
			<h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
			<div class="input-div one">
				<div class="i">
					<i class="fas fa-user"></i>
				</div>
				<div class="div">
					<h5 id="name_msg">用户名</h5>
					<input id="name" autofocus name="name" type="text" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5 id="pass_msg">密码</h5>
					<input id="pass" name="pass" type="password" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5 id="repass_msg">确认密码</h5>
					<input id="repass" type="password" class="input">
				</div>
			</div>
			<input type="button" id="regist"  class="btn" value="注册">
		</form>
	</div>
</div>
<script type="text/javascript" src="/static/regist/js/main.js"></script>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
	layui.use(function(){
		var $ = layui.$;
		$("#name").blur(function (){
			checkUserNameUnique();
		})

		// 仅在确认密码框失去焦点时才执行
		$("#repass").blur(function (){
			checkPassEqual();
		})

		$("#regist").click(function (){
			if (!checkUserNameUnique()){
				return false;
			}
			if(!checkPassEqual()){
				return false;
			}
			$.ajax({
				url:"/user/regist",
				type:"post",
				data:{name:$("#name").val(),pass:$("#pass").val()},
				dataType:"text",
				success:function (data) {
					if(data == "success"){
						layer.msg("注册成功");
						setTimeout(function (){
							window.location.href = "/asyncuser/tologin";
						},1000);
					} else {
						layer.msg("注册失败");
					}
				}
			})
		})

		function checkUserNameUnique(){
			let flag = false;
			$.ajax({
				url: "/asyncuser/checkUserNameUnique",
				type: "post",
				data: { name: $("#name").val() },
				dataType: "text", // 设为 "text"，确保接收纯文本
				success: function(data) {
					if (data === "success") {
						console.log(data);
						$("#name_msg").html("");
						$("#regist").attr("disabled", false).css("background-color", "dodgerblue");
						$("#pass").attr("disabled", false).css("background-color", "#ffffff");
						$("#repass").attr("disabled", false).css("background-color", "#ffffff");
						flag = true;
					} else {
						$("#name_msg").html("用户名已存在").css("color", "red");
						$("#regist").attr("disabled", true).css("background-color", "#ccc");
						$("#pass").attr("disabled", true).css("background-color", "#ecacac");
						$("#repass").attr("disabled", true).css("background-color", "#ecacac");
						flag = false;
					}
				},
				error: function(xhr, status, error) {
					console.error("请求出错：" + error);
				}
			});
			return flag;
		}

		function checkPassEqual(){
			if($("#pass").val() != $("#repass").val()){
				$("#pass_msg").html("两次密码不一致").css("color","red");
				$("#repass_msg").html("两次密码不一致").css("color","red");
				$("#regist").attr("disabled",true).css("background-color","#ccc");
				return false;
			} else {
				$("#pass_msg").html("");
				$("#repass_msg").html("");
				$("#regist").attr("disabled",false).css("background-color","dodgerblue");
				return true;
			}
		}
	});
</script>
</body>
</html>
--%>









<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
	<title>AiDex Sharp 快速开发平台-登录页面</title>
	<link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
	<link rel="icon" href="/static/regist/img/favicon.ico">
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<img class="wave" src="/static/regist/img/wave.png">
<div class="container">
	<div class="img">
		<img src="/static/regist/img/bg.svg">
	</div>
	<div class="login-content">
		<form>
			<img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
			<h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
			<div class="input-div one">
				<div class="i">
					<i class="fas fa-user"></i>
				</div>
				<div class="div">
					<h5 id="name_msg">用户名</h5>
					<input id="name" autofocus name="name" type="text" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5 id="pass_msg">密码</h5>
					<input id="pass" name="pass" type="password" class="input">
				</div>
			</div>
			<div class="input-div pass">
				<div class="i">
					<i class="fas fa-lock"></i>
				</div>
				<div class="div">
					<h5 id="repass_msg">确认密码</h5>
					<input id="repass" type="password" class="input">
				</div>
			</div>
			<input type="button" id="regist" class="btn" value="注册">
		</form>
	</div>
</div>
<script type="text/javascript" src="/static/regist/js/main.js"></script>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
	layui.use(function(){
		var $ = layui.$;

		// 用户名输入框失去焦点时检查唯一性
		$("#name").blur(function (){
			checkUserNameUnique(function(){});
		});

		// 确认密码框失去焦点时执行
		$("#repass").blur(function (){
			checkPassEqual();
		});

		// 注册按钮点击事件
		$("#regist").click(function (){
			// 使用回调函数处理异步的用户名唯一性检查
			checkUserNameUnique(function(isUnique) {
				if (!isUnique) return; // 用户名不可用，停止注册
				if (!checkPassEqual()) return; // 密码不一致，停止注册

				// 发送注册请求
				$.ajax({
					url: "/asyncuser/regist",
					type: "post",
					data: { name: $("#name").val(), pass: $("#pass").val() },
					dataType: "text",
					success: function(data) {
						if (data === "success") {
							layer.msg("注册成功");
							setTimeout(function() {
								window.location.href = "/asyncuser/tologin";
							}, 1000);
						} else {
							layer.msg("注册失败");
						}
					},
					error: function(xhr, status, error) {
						console.error("注册请求出错：" + error);
					}
				});
			});
		});

		// 检查用户名唯一性
		function checkUserNameUnique(callback) {
			$.ajax({
				url: "/asyncuser/checkUserNameUnique",
				type: "post",
				data: { name: $("#name").val() },
				dataType: "text",
				success: function(data) {
					if (data === "success") {
						$("#name_msg").html("");
						$("#regist").attr("disabled", false).css("background-color", "dodgerblue");
						$("#pass").attr("disabled", false).css("background-color", "#ffffff");
						$("#repass").attr("disabled", false).css("background-color", "#ffffff");
						callback(true); // 用户名可用
					} else {
						$("#name_msg").html("用户名已存在").css("color", "red");
						$("#regist").attr("disabled", true).css("background-color", "#ccc");
						$("#pass").attr("disabled", true).css("background-color", "#ecacac");
						$("#repass").attr("disabled", true).css("background-color", "#ecacac");
						callback(false); // 用户名不可用
					}
				},
				error: function(xhr, status, error) {
					console.error("请求出错：" + error);
					callback(false); // 出现错误时返回 false
				}
			});
		}

		// 检查两次输入的密码是否一致
		function checkPassEqual() {
			if ($("#pass").val() != $("#repass").val()) {
				$("#pass_msg").html("两次密码不一致").css("color", "red");
				$("#repass_msg").html("两次密码不一致").css("color", "red");
				$("#regist").attr("disabled", true).css("background-color", "#ccc");
				return false;
			} else {
				$("#pass_msg").html("");
				$("#repass_msg").html("");
				$("#regist").attr("disabled", false).css("background-color", "dodgerblue");
				return true;
			}
		}
	});
</script>
</body>
</html>
